<template>
	<view :class="themeName">
		<u-tabs font-size="28" name="tabsName" inactive-color="#333" :active-color="themeColor" :list="list"
			:is-scroll="false" :current="current" @change="change">
		</u-tabs>

		<mescroll-uni ref="mescrollRef" bgColor="white" top="100rpx" @init="mescrollInit" :down="downOption"
			:up="upOption" @down="downCallback" @up="upCallback">
			<view class="list mt20" v-if="lists.length !== 0">
				<block v-if="current < 3">
					<view v-for="(item, index) in lists" :key="index" class="item">
						<view class="bill-list bg-white">
							<view class="bill-item flex row-between">
								<view>
									<view class="black mb10">{{ item.type_desc }}</view>
									<view class="xs muted">{{ item.create_time }}</view>
								</view>
								<view class="lg income">{{ item.change_amount_desc }}</view>
							</view>
						</view>
					</view>
				</block>
				<block v-else>
					<view v-for="(item, index) in lists" :key="index" class="item">
						<view class="bill-list bg-white m-b-20">
							<view class="bill-item flex row-between">
								<view>
									<view class="black m-b-10">{{ item.nickname }}{{$zhTran('的订单')}}</view>
									<view class="xs muted m-b-10">{{$zhTran('订单编号')}}：{{ item.order_info.sn }}</view>
									<view class="xs muted m-b-10">{{$zhTran('订单金额')}}：{{ item.order_info.total_amount }}
									</view>
									<view class="xs muted m-b-10">{{$zhTran('核销时间')}}：{{ item.handle_time }}</view>
									<view class="xs muted">{{$zhTran('核销员')}}：{{ item.handle_name }}</view>
								</view>
								<view class="lg income text-center">
									<view>{{ item.change_amount_desc }}</view>
									<view class="xs muted m-t-10">{{$zhTran('佣金')}}</view>
								</view>
							</view>
						</view>
					</view>
				</block>
			</view>
			<w-jishuzhichi :class="[{'jishuzhichi-nodata':lists.length == 0}]" />
		</mescroll-uni>
	</view>
</template>

<script>
	// +----------------------------------------------------------------------
	// | LikeShop100%开源免费商用电商系统
	// +----------------------------------------------------------------------
	// | 欢迎阅读学习系统程序代码，建议反馈是我们前进的动力
	// | 开源版本可自由商用，可去除界面版权logo
	// | 商业版本务必购买商业授权，以免引起法律纠纷
	// | 禁止对系统程序代码以任何目的，任何形式的再发布
	// | Gitee下载：https://gitee.com/likeshop_gitee/likeshop
	// | 访问官网：https://www.likemarket.net
	// | 访问社区：https://home.likemarket.net
	// | 访问手册：http://doc.likemarket.net
	// | 微信公众号：好象科技
	// | 好象科技开发团队 版权所有 拥有最终解释权
	// +----------------------------------------------------------------------
	// | Author: LikeShopTeam
	// +----------------------------------------------------------------------
	import {
		userBill
	} from "@/api/user";
	import MescrollMixin from "@/components/mescroll-uni/mescroll-mixins.js";
	import MescrollMoreItemMixin from "@/components/mescroll-uni/mixins/mescroll-more-item.js";
	export default {
		mixins: [MescrollMixin, MescrollMoreItemMixin],
		data() {
			return {
				list: [{
						tabsName: this.$zhTran("全部"),
						isShow: true,
						type: "bnw",
					},
					{
						tabsName: this.$zhTran("支出"),
						isShow: false,
						type: "bnw_dec",
					},
					{
						tabsName: this.$zhTran("收入"),
						isShow: false,
						type: "bnw_inc",
					},
				],
				current: 0,
				lists: [],

				downOption: {
					auto: false, // 不自动加载 (mixin已处理第一个tab触发downCallback)
				},
				upOption: {
					auto: true, // 不自动加载
					noMoreSize: 4, //如果列表已无数据,可设置列表的总数量要大于半页才显示无更多数据;避免列表数据过少(比如只有一条数据),显示无更多数据会不好看; 默认5
					empty: {
						icon: this.$getImageUri('resource/image/shopapi/uniapp/empty/order.png'),
						tip: this.$zhTran("暂无账户明细"), // 提示
						fixed: true,
						top: "200rpx",
					},
				},
			};
		},

		methods: {
			change(index) {
				for (let i = 0; i < this.list.length; i++) {
					this.list[i].isShow = false;
				}
				this.current = index;
				this.upCallback({
					num: 1,
					size: 10,
				});
				this.list[index].isShow = true;
			},

			upCallback(page) {
				let num = page.num;
				let size = (page.size += 5);

				userBill({
						type: this.list[this.current].type,
						page_no: num,
						page_size: size,
					})
					.then((res) => {
						console.log(res);
						if (page.num == 1) this.lists = []; //如果是第一页需手动置空列表
						this.lists = this.lists.concat(res.lists); //追加新数据
						this.lists = this.$zhTran(this.lists)
						if (res.extend.is_shop_leader != undefined && res.extend.is_shop_leader > 0 && this.list
							.length == 3) {
							this.list.push({
								tabsName: this.$zhTran("自提核销"),
								isShow: false,
								type: "bw_inc_selfshop_profit",
							})
						}
						this.mescroll.endBySize(res.lists.length, res.count);
					})
					.catch((err) => {
						this.mescroll.endBySize();
					});
			},
		},

		onShow() {},
		onLoad() {
			if (this.$Route.meta.atitle) {
				uni.setNavigationBarTitle({
					title: this.$zhTran(this.$Route.meta.atitle)
				})
			}
		},
	};
</script>
<style lang="scss">
	.list {
		.item {
			.time {
				padding: 30rpx;
			}

			.bill-list {
				.bill-item {
					padding: 20rpx 30rpx;

					// border-bottom: $-solid-border;
					.income {
						color: red;
					}
				}
			}
		}
	}
</style>